<template>
  <view class="od_list">
    <div class="top t-ju-between">
      <span>全部</span>
      <span>待付款</span>
      <span>待发货</span>
      <span>已发货</span>
      <span>已完成</span>
    </div>
    <div class="top1">
      <div class="top1_top">
        <div class="top1_topl">
          <image src="../../../static/tabbar/main.png" mode=""></image>
          <div class="name">曹某某</div>
        </div>
        <div class="top1_topr">
          2023-3-4 22:22拍下      <span style="color: red;margin-left: 10rpx;">交易成功</span>
        </div>
      </div>
      <div class="center">
        <image class="img" src="../../../static/design/default.png" mode=""></image>
        <div class="center_wz">
          设计方案套餐设计方案套餐设计方案套餐
        </div>
        <div class="money">
          ￥499.00
        </div>
      </div>
      <div class="center1">
        共1件 实收￥499.00  （含额外费￥100.00） 
      </div>
      <div class="bottom">
        订单编号：44444444444444<br/>
        收货地址：曹某某  13766666666，上海市东区上海市东区
      </div>
    </div>
    <div class="top1">
      <div class="top1_top">
        <div class="top1_topl">
          <image src="../../../static/tabbar/main.png" mode=""></image>
          <div class="name">曹某某</div>
        </div>
        <div class="top1_topr">
          2023-3-4 22:22拍下      <span style="color: red;margin-left: 10rpx;">交易成功</span>
        </div>
      </div>
      <div class="center">
        <image class="img" src="../../../static/design/default.png" mode=""></image>
        <div class="center_wz">
          设计方案套餐设计方案套餐设计方案套餐
        </div>
        <div class="money">
          ￥499.00
        </div>
      </div>
      <div class="center1">
        共1件 实收￥499.00  （含额外费￥100.00） 
      </div>
      <div class="bottom">
        订单编号：44444444444444<br/>
        收货地址：曹某某  13766666666，上海市东区上海市东区
      </div>
    </div>
  </view>
</template>

<script>
</script>

<style lang="scss" scoped>
  .od_list {
   
  }
  .top{
    padding: 0 20rpx;
    width: 100%;
    height: 70rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    background-color: #fff;
    box-sizing: border-box;
  }
  .top1{
    padding: 20rpx 30rpx;
    width: 100%;
    // height: 400rpx;
    margin: 20rpx auto;
    background-color: #fff;
    box-sizing: border-box;
  }
  .top1_top{
    width: 100%;
    height: 50rpx;
  }
  .name{
    float: left;
    margin-left: 20rpx;
    margin-top: 15rpx;
    font-size: 25rpx;
  }
  image{
    width: 50rpx;
    height: 50rpx;
    float: left;
  }
  .top1_topr{
    width: 350rpx;
    height: 40rpx;
    float: right;
    font-size: 8rpx;
    margin-top: 5rpx;
  }
  .img{
    width: 200rpx;
    height: 150rpx;
    border-radius: 25rpx 25rpx 0 0;
    float: left;
  }
  .center{
    width: 100%;
    height: 150rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 28rpx;
  }
  .center_wz{
    width: 330rpx;
    height: 90rpx;
    float: left;
    font-size: 30rpx;
    font-weight: 600;
  }
  .money{
    font-size: 30rpx;
    color: red;
    font-weight: 600;
  }
  .center1{
    width: 470rpx;
    height: 45rpx;
    font-size: 18rpx;
    color: darkgray;
    float: right;
  }
  .bottom{
    width: 85%;
    height: 140rpx;
    margin-top: 50rpx;
    color: darkgray;
  }
</style>